[00:00] In this lesson, we'll learn how to use the Eyedropper Tool in Ignition. It provides an easy way to transfer colors for the foreground and background, or stroke and fill, from one Vision component to another. The Eyedropper Tool is found on the Drawing Tools palette in the Designer. For a first scenario, let's say we have these top two filled shapes, a yellow circle and a blue rectangle. Let's create one more shape, a new triangle. We'll make sure to complete that operation by clicking on the Selection Tool once more, then we can reposition and resize this triangle however we wish. Now, let's say we want to change the triangle's fill color to the yellow of the circle, and its stroke or border color to the blue of the rectangle. We could do this in the Property Editor, but we prefer to have the Eyedropper Tool do this for us. What we can do instead is, first we'll click to select the component we want to alter, in this case the triangle.

[01:09] Next, we'll head over to our Drawing Tools palette and click the Eyedropper Tool to enable it. Then we'll move our arrow cursor over the component we'd like to transfer a color from. In this case, it's the yellow circle, and in the bottom border we see the hex value of the current color displayed. Then when we click the circle, its fill color is transferred to the selected triangle. One important thing to note here is that as long as the Eyedropper Tool remains selected, further clicks will continue to transfer new colors. For example, if we click on the rectangle or even the window background, those colors get transferred instead. Once we have the yellow background we want, we'll complete the action by reselecting the Selection Tool. Then with the triangle still selected, let's also update its stroke color. Once again, we'll click the Eyedropper Tool to enable it, place our arrow cursor over the rectangle, the component we want to transfer the color from, and this time do a right click to transfer the blue color to the triangle's border, and then complete the Eyedropper action by clicking on the Selection Tool.

[02:22] Since it's a bit hard to see like this, let's head over to our Property Editor and widen the triangle's stroke style a bit, maybe to 2.5 or so. Now we can see the blue border clearly. Then for a second scenario, we have a button at lower left with a light blue background and red labeling text. Suppose we create a new button, and we'll put it alongside this existing one, and we'll make it roughly the same size. Let's say we want to transfer the colors from this existing button over to this new one. With a new button selected, let's once again do the following.

[03:05] We'll click the Eyedropper Tool to enable it. Then we'll place our arrow cursor over the light blue fill portion of the original button. We can confirm this by looking at the currently specified color at the bottom. Then we can click to transfer the background color. Then we'll move the cursor over the text portion of the original button. Make sure the currently specified color is indeed the red that we want, then if we right click, we transfer the red text color over to the new button component. And then of course, we'll complete the action by clicking on the Selection Tool once more. So in this lesson, we have shown how to use the Eyedropper Tool to easily transfer colors between components depending on the click used. Use the left click to transfer, fill or background colors and use a right click to transfer stroke or foreground colors.